import { Component } from 'react'

export default class Cart extends Component {

    state = {
        list: [
            { name: '苹果', price: 10, num: 12, id: 1 },
            { name: '香蕉', price: 7, num: 13, id: 2 },
            { name: '草莓', price: 8, num: 22, id: 3 },
        ]
    }

    // 删除
    handleDelete = (data: number) => {
        // const newList = this.state.list.filter(item => item.id !== data)
        // console.log('newList',  newList)
        // this.setState({ list: newList})

        const { list } = this.state;
         const newList = list.filter(item => item.id !== data)
         this.setState({list: newList})

    }

    // 减少
    handleReduce = (data: number) => {
        const { list } = this.state
        list[data].num = list[data].num - 1
         this.setState({list})
    }

    // 增加
    handleAdd  = (data: number) => {
        const { list } = this.state
        list[data].num = list[data].num + 1
         this.setState({list})
    }

    // 总价
    get total () {
        let t: number = 0;
        const {list} = this.state
        list.map(item => {
           t += item.num * item.price
        })
        return t
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>商品名</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {/* <tr>
                            <td>苹果</td>
                            <td>￥10</td>
                            <td>
                                <button>-</button>
                                10
                                <button>+</button>
                            </td>
                            <td>
                                <button>删除</button>
                            </td>
                        </tr> */}
                        {this.state.list.map((item,index) => (
                            <tr key={item.id}>
                                <td>{item?.name}</td>
                                <td>
                                    <button disabled={item.num === 1} onClick={() => this.handleReduce(index)}>-</button>
                                    {item?.price}
                                    <button onClick={() => this.handleAdd(index)}>+</button>
                                </td>
                                <td>{item?.num}</td>
                                <td>{Number(item.num) * Number(item.num)}</td>
                                <td>
                                    <button onClick={() => this.handleDelete(item.id)}>删除</button>
                                </td>
                            </tr>
                        ))}
                    </tbody>

                </table>
                总价： <span style={{ color: "red" }}>{this.total}</span>
            </div>
        )
    }
}
